{% extends "albums/base.html" %}
{% block content %}
<div class="row">
    <div class="col-sm-12 text-center">
        <h4 class="bg-primary text-white p-2" style="margin: 15px;">Full example with foreign key and many to many relation</h4>
        <div class="btn-group btn-group-toggle" role="group" aria-label="Decades">
            <button class="btn btn-success btn-decade">All time</button>
            <button class="btn btn-primary btn-decade" rel="195">50's</button>
            <button class="btn btn-primary btn-decade" rel="196">60's</button>
            <button class="btn btn-primary btn-decade" rel="197">70's</button>
            <button class="btn btn-primary btn-decade" rel="198">80's</button>
            <button class="btn btn-primary btn-decade" rel="199">90's</button>
            <button class="btn btn-primary btn-decade" rel="200">00's</button>
            <button class="btn btn-primary btn-decade" rel="201">10's</button>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <table id="albums" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>Rank</th>
                    <th>Artist</th>
                    <th>Album name</th>
                    <th>Year</th>
                    <th>Genres</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<div class="row">
    <div class="col-sm-12 text-center">
        <h4 class="bg-primary text-white p-2" style="margin: 15px;">Minimal example with data attributes</h4>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <table id="albums_minimal" class="table table-striped table-bordered" style="width:100%" data-server-side="true" data-ajax="/api/albums/?format=datatables">
            <thead>
                <tr>
                    <th data-data="rank">Rank</th>
                    <th data-data="artist_name" data-name="artist.name">Artist</th>
                    <th data-data="name">Album name</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<div class="row">
    <div class="col-sm-12 text-center">
        <h4 class="bg-primary text-white p-2" style="margin: 15px;">Example Using POST</h4>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <table id="albums_post" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>Rank</th>
                    <th>Artist</th>
                    <th>Album Name</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<footer class="footer" style="margin-top: 25px;">
    <div class="container">
        <p class="text-muted text-center">
            Copyright © 2018 David Jean Louis - 
            Data from <a href="https://data.world/notgibs/rolling-stones-top-500-albums" target="_blank">data.world</a>
        </p>
    </div>
</footer>
{% endblock %}
{% block extra_js %}
<script>
$(document).ready(function() {
    var table = $('#albums').DataTable({
        "serverSide": true,
        "ajax": "/api/albums/?format=datatables",
        "columns": [
            {"data": "rank", "searchable": false},
            // Use dot notation to reference nested serializers.
            // This data: could alternatively be displayed with the serializer's ReadOnlyField as well, as seen in the minimal example.
            {"data": "artist.name", "name": "artist.name"},
            {"data": "name"},
            {"data": "year"},
            {"data": "genres", "name": "genres.name", "sortable": false},
        ]
    });
    $('.btn-decade').on('click', function() {
        table.columns().search('');
        var rel = $(this).attr('rel');
        if (rel) {
            table.columns(3).search('^' + rel + '[0-9]$', true).draw();
        } else {
            table.draw();
        }
    });
    $('#albums_minimal').DataTable({
        "search": {"regex": true},
        "language": {"searchPlaceholder": "regular expression"}
    });
    $('#albums_post').DataTable({
        "serverSide": true,
        "ajax": {
            "url": "api/post-list/albums/?format=datatables",
            "type": "POST",
            "beforeSend": function(xhr) {
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token|escapejs }}");
            }
        },
        "columns": [
            {"data": "rank", "searchable": false},
            {"data": "artist.name", "name": "artist.name"},
            {"data": "name"},
        ]
    });
});
</script>
{% endblock %}
